<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title th:text="${projTitle}"></title>
    <script src="/js/vue.global.prod.js"></script>
    <script src="/js/axios.min.js"></script>
</head>
<body>
<h3>成绩管理系统</h3>
<div id="scoreDiv">
    <div style="border:1px solid; margin-left: 100px;width: 800px">
        <h5 style="text-align: center" th:text="${projTitle}"></h5>
        <h6 style="text-align: center"  th:text="${userName}"></h6>
        <form id="scoreForm">
            <table style="width: 100%">
                <tr>
                    <td>学号</td>
                    <td><input type="text" v-model="scoreData.stuNo"></td>
                    <td>姓名</td>
                    <td><input type="text" v-model="scoreData.stuName"></td>
                </tr>
                <tr>
                    <td>课程</td>
                    <td><input type="text" v-model="scoreData.course"></td>
                    <td>成绩</td>
                    <td><input type="number" v-model="scoreData.score"></td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: center">
                        <button type="button" @click="saveScore">保存</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <br/>
    <div style="border:1px solid; margin-left: 100px;width: 800px">
        <div>
            <label>学号:<input type="text" v-model="queryParam.stuNo"></label>
            <label>科目:<input type="text" v-model="queryParam.course"></label>
            <button type="button" @click="queryScore">搜索</button>
        </div>
        <table border="1" style="text-align: center;width: 100%">
            <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>录入时间</th>
            </tr>
            </thead>
            <tbody v-for="score in scoreList">
            <tr>
                <td>{{score.stuNo}}</td>
                <td>{{score.stuName}}</td>
                <td>{{score.course}}</td>
                <td>{{score.score}}</td>
                <td>{{score.date}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
<script>
    axios.defaults.headers={'Content-Type': 'application/x-www-form-urlencoded'};
    const scoreApp = Vue.createApp({
        data() {
            return {
                scoreData: {
                    stuNo: "",
                    stuName: "",
                    course: "",
                    score: 60
                },
                queryParam:{
                    stuNo : null,
                    course : null
                },
                scoreList: []
            }
        },
        methods: {
            saveScore() {
                for(let field in this.scoreData){
                    if(this.scoreData[field] == ""){
                        alert("请输入"+field)
                        return;
                    }
                }
                axios
                    .post('/score/saveScore', this.scoreData)
                    .then(ret => {
                        this.queryScore();
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            queryScore() {
                axios
                    .post('/score/queryScore', this.queryParam)
                    .then(ret => {
                        this.scoreList = ret.data;
                    })
                    .catch(function (error) { // 请求失败处理
                        alert(error.message)
                        console.log(error);
                    });
            }
        },
        mounted(){
            this.queryScore();
        }
    })

    scoreApp.mount('#scoreDiv')
</script>